<template>
    <a-menu 
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        :theme="theme" mode="inline"
        @openChange="openChange"
        @click="menufun"
    >
        <template v-for="item in lists">
            <a-menu-item v-if="!item.children && !item.hidden" :key="item.path">
                <template #icon v-if="item.meta.icon">
                    <svg-icon :type="item.meta.icon"/>
                </template>
                {{item.meta.title}}
            </a-menu-item>
            
            <a-sub-menu v-if="item.children && !item.hidden" :key="item.path">
                <template #icon v-if="item.meta.icon">
                    <svg-icon :type="item.meta.icon"/>
                </template>
                <template #title>{{item.meta.title}}</template>
                <IMenu :menuList="item.children" :theme="theme" />
            </a-sub-menu>
        </template>
          
    </a-menu>
</template>
<script>
import {
} from '@ant-design/icons-vue';
import { reactive,computed,toRefs,defineComponent } from 'vue'
import { useRouter,useRoute,onBeforeRouteUpdate } from 'vue-router'
import { cache }  from '@/config'
export default defineComponent({
    components: {
    },
    props:{
        menuList:Array,
        theme:String
    },
    // setup(props,{emit}) {
    setup(props) {
        const router = useRouter(), route = useRoute()
        const path = computed(() =>route.path)
        let antdLeftMenu = cache('DarkLeftMenu')?cache('DarkLeftMenu'):[]

        const state = reactive({
            lists:props.menuList,
            theme: props.theme,
            selectedKeys: [path.value],//选中当前菜单
            openKeys: antdLeftMenu,//选中当前菜单展开与展开项
        });

        // 动态监听路由变化，选中当前菜单
        onBeforeRouteUpdate(to => {
            state.selectedKeys = [to.path]
        });
        
        // 点击点击子菜单时 调用此函数
        let menufun = (item)=>{
            // 跳转
            router.push({ 
                path:item.key
            })
        }

        // SubMenu 展开/关闭的回调
        let openChange = (openKeys)=>{
            state.openKeys = openKeys
            cache('DarkLeftMenu',openKeys)
        }
        
        return {
            ...toRefs(state),
            menufun,
            openChange,
        }
    },
    
})
</script>
<style scoped>
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
  border-right: 0px solid #f0f0f0!important;
}
</style>